import {BaseEle} from "./core.js";

class ZSwitch extends BaseEle {
    constructor() {
        super();

        // 创建影子DOM
        this.attachShadow({ mode: 'open' });

        // 组件模板
        this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: inline-block;
        }
        
        .switch {
        --switch-width: var(--z-switch-width, 50px);
          position: relative;
          display: inline-block;
          width: 50px;
          height: 24px;
        }

        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: var(--z-switch-bgc, #ccc);
          transition: .4s;
          border-radius: 34px;
        }

        .slider:before {
          position: absolute;
          content: "";
          height:17px;
          width:17px;
          left: 4px;
          bottom: 4px;
          background-color: var(--z-switch-active-bgc, #fff);
          transition: .4s;
          border-radius: 50%;
        }
        
        input:checked + .slider {
          background-color: var(--z-switch-active-color, var(--z-color-info));
        }
        
        input:checked + .slider:before {
          transform: translateX(calc(var(--switch-width)/2));
        }
        
        input {
          display: none;
        }
      </style>
      
      <div class="switch">
        <input type="checkbox" name="checkbox">
        <span class="slider"></span>
      </div>
    `;

        this._shadowRoot = this.shadowRoot;

        // 获取元素引用
        this.input = this._shadowRoot.querySelector('input');
        this.slider = this._shadowRoot.querySelector('.slider');
    }

    mounted() {
        // 初始化状态
        this.input.checked = this.hasAttribute('checked');

        // 添加事件监听
        this.input.addEventListener('change', this._onChange.bind(this));
        this.slider.addEventListener('click', this.toggle.bind(this));

        // 可访问性
        this.setAttribute('role', 'switch');
        this._updateAria();
    }

    // 切换开关状态
    toggle() {
        this.input.checked = !this.input.checked;
        this._updateAria();
        this._dispatchEvent();
        // console.log('toggle', this.input.checked )
    }

    attrChanged(name, oldValue, newValue) {
        // this._log('switch attrChanged', name, oldValue, newValue);
        if (name === 'checked') {
            this.input.checked = newValue !== null;
            this._updateAria();
        }
    }

    // 获取/设置checked属性
    get checked() {
        return this.input.checked;
    }

    set checked(value) {
        // console.log('checked', value);
        const isChecked = Boolean(value);
        if (isChecked) {
            this.setAttribute('checked', '');
        } else {
            this.removeAttribute('checked');
        }
        this.input.checked = isChecked;
        this._updateAria();
    }

    // 更新ARIA状态
    _updateAria() {
        this.setAttribute('aria-checked', this.input.checked.toString());
    }

    // 触发自定义事件
    _dispatchEvent() {
        this.dispatchEvent(new Event('change'));
        // this.dispatchEvent(new CustomEvent('change', {
        //     detail: {
        //         checked: this.input.checked
        //     },
        //     bubbles: true,
        //     composed: true
        // }));
    }

    // 处理内部change事件
    _onChange() {
        console.log('switch, onchange')
        this._updateAria();
        this._dispatchEvent();
    }
}

// 注册自定义元素
// customElements.define('z-switch', ZSwitch);
ZSwitch.defsel('z-switch', {
    attrs: {
        'checked':false
    }
})